@import "../common.scss"; 
html,
body {
    height: 100%;
    overflow: hidden;
		background-image: url(../../images/br.jpg);
		background-size: cover;
}

body {
    line-height: unset;
}

.content {
    padding: 0 ws(15);
    position: relative;
    .logo {
        width: ws(100);
				height: ws(100);
				margin: auto;
				margin-bottom: ws(30);
				margin-top: ws(100);
				> img{
					width: 100%;
					height: 100%;
				}
    }
    .itemClass {
			width: 70%;
			margin: auto;
        padding-bottom: ws(6);
        height: ws(55);
        margin-bottom: ws(15);
        display: flex;
        align-items: flex-end;
        .title{
            font-size: ws(14);
            transition: .35s all;
            position: absolute;
            bottom: ws(40);
            left: 0;
            color: #6c6c6c;
        }
        >input {
            font-size: ws(16);
            flex: 1;
            border: unset;
            padding: ws(8) ws(15);
            height: unset;
            margin: 0;
            border-radius: ws(40);
						box-shadow: 0 0 ws(3) rgba(#000,.3) inset;
        }
    }
    .register {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        color: darken($main-color, 15%);
        font-size: ws(14);
        span {
            margin-right: 5px;
        }
        .mui-switch {
            height: 20px;
            background-color: #ddd;
            .mui-switch-handle {
                width: 18px;
                height: 18px;
            }
        }
        .mui-switch-mini {
            width: 36px;
        }
    }
    .login {
        margin-top: ws(50);
        height: ws(45);
        line-height: ws(45);
        background: linear-gradient(#54ade4, #2f8cdc);
        color: #fff;
        text-align: center;
        border-radius: ws(30);
        box-shadow: 0 ws(2) ws(10) #54a3e4;
    }
}

.mui-content {
    background-color: #fff;
}

.mui-switch.mui-active {
    border-color: $main-color;
    background-color: $main-color !important;
}

.mui-content-padded {
    margin-top: ws(25);
}

.mui-btn {
    padding: ws(10);
}

.link-area {
    display: flex;
		justify-content: center;
    margin-top: ws(20);
    text-align: center;
    >a {
        color: darken($main-color, 15%);
        font-size: ws(14);
				margin: 0 ws(10);
    }
}

.spliter {
    color: #719bf1;
    padding: 0 ws(8);
}

.oauth-area {
    position: absolute;
    bottom: ws(20);
    left: 0px;
    text-align: center;
    width: 100%;
    padding: 0;
    margin: 0;
}

.oauth-area .oauth-btn {
    display: inline-block;
    width: ws(50);
    height: ws(50);
    background-size: ws(30) ws(30);
    background-position: center center;
    background-repeat: no-repeat;
    margin: 0px ws(30);
    /*-webkit-filter: grayscale(100%); */
    border: solid 1px #ddd;
    border-radius: ws(25);
}

.oauth-area .oauth-btn:active {
    border: solid 1px #aaa;
}

.oauth-area .oauth-btn.disabled {
    background-color: #ddd;
}

.top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
}